<template>
	<div class="news-detail maxW">
		<div class="top-menu">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/newsList' }">通知列表</el-breadcrumb-item>
				<el-breadcrumb-item>{{ newsData.name }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="news-detail-content">
			<div class="detail-content-l">
				<h3>{{ newsData.name }}</h3>
				<div class="news-info">
					<div class="creater-info">
						<span>{{ newsData.user_name }}</span>
						<span>{{ newsData._create_time }}</span>
						<span>{{ newsData.clicks }}人查看</span>
					</div>
					<div class="share-box fr">
						<share :wapPath='wapPath'></share>
					</div>
				</div>
				<div class="news-content" v-html="newsData.content"></div>
			</div>
			<div class="detail-content-r">
				<template>
					<el-table :data="otherNewsData" style="width: 100%" @cell-click="handleChoose">
						<el-table-column prop="name" label="其他新闻公告" :show-overflow-tooltip="true" width="280"></el-table-column>
						<el-table-column prop="friend_time" label="" :show-overflow-tooltip="true" width="80"></el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
import share from '../../common/share';
export default {
    components: {
        share
    },
	data() {
		return {
			newsId: this.$route.query.id, //左侧当前展示出来的新闻公告id
			newsData: {}, //左侧当前展示的新闻数据
			otherNewsData: [] //右侧其他新闻公告数据
		};
	},
	created() {
		this.getNewsInfo();
		this.getOtherNews();
	},
	mounted() {
		this.addNewClick();
	},
	computed: {
		wapPath(){
			const Code = sessionStorage.getItem('CheckSchoolAppCode')  
            return `${window.location.origin}/wap/home?path=gonggaoDetails&bdShare=true&id=${this.newsId}&CheckSchoolAppCode=${Code}`;
		},	
	},
	methods: {
		//获取左侧显示的新闻信息详情
		getNewsInfo() {
			let success = res => {
				this.newsData = res.data;
			};
			this.$ajax({
				url: 'api/news/news_detail',
				method: 'get',
				params: {
					id: this.newsId
				},
				func: {
					success: success
				}
			});
		},
		//获取右侧其他新闻公告
		getOtherNews() {
			let success = res => {
				this.otherNewsData = res.data.data;
			};
			this.$ajax({
				url: 'api/news/news_list',
				method: 'get',
				params: {
					page_index: 1,
					page_size: 4,
					order: 'time'
				},
				func: {
					success: success
				}
			});
		},
		//其他新闻公告： 点击单个新闻进行展示切换
		handleChoose(row) {
			this.$router.push({ path: '/home/newsDetail', query: { id: row.id } });
		},
		// 添加观看记录
		addNewClick() {
			let success = res => {};
			this.$ajax({
				url: 'api/news/add_new_click',
				method: 'put',
				data: {
					id: this.newsId
				},
				func: {
					success: success
				}
			});
		}
	}
};
</script>
<style lang="scss">
.breakrow {
	word-wrap: break-word;
	word-break: break-all;
}
.news-detail {
	overflow: hidden;
	padding-bottom: 40px;
	.top-menu {
		margin: 30px 0 20px;
	}
	.share-box {
		.a-tit {
			height: 28px;
			line-height: 28px;
			font-size: 12px;
			color: #656e6c;
			margin-right: 10px;
		}
        .title{
            font-size: 12px;
            color: #656e6c;
        }
    }
    .news-detail-content{
        display: flex;
        justify-content: space-between;
        min-height: 650px;
    }
	.detail-content-l {
        width: 65%;
		background-color: #fff;
		padding: 40px 30px;
		box-sizing: border-box;
		h3 {
			font-size: 24px;
			line-height: 31px;
			font-weight: bold;
			margin-bottom: 50px;
			@extend .breakrow;
		}
		.news-info {
			margin-bottom: 50px;
		}
		.creater-info {
			display: inline-block;
			line-height: 28px;
			span {
				font-size: 12px;
				color: #888;
				margin-right: 10px;
			}
		}
		.news-content {
			font-size: 14px;
			line-height: normal;
			@extend .breakrow;
		}
	}
	.detail-content-r {
        width: 33%;
		background-color: #fff;
		padding: 20px 18px;
		box-sizing: border-box;
		.el-table__row {
			td:nth-child(1) {
				font-size: 14px;
				cursor: pointer;
			}
			td:nth-child(2) {
				font-size: 12px;
				color: #888888;
				float: right;
			}
		}
	}
}
</style>
